<template>
    <div>
        <Top />
        <Middle 
            :middleArr="MiddleArr" 
            :num="num" 
            :str="str"
            :changed="changed"
        />
        <Footer />
    </div>
</template>

<script>
    import Top from "../components/Top.vue"
    import Footer from "../components/Footer.vue"
    import Middle from "../components/Middle.vue";

    export default{
        name: "Home",
        data(){
            return{
                str:"哦",
                num:30,
                MiddleArr: [
                    {title:"html",position:"精通",isShow:false},
                    {title:"css",position:"了解",isShow:false},
                    {title:"js",position:"掌握",isShow:false},
                    {title:"es6",position:"熟练",isShow:false},
                    {title:"less",position:"了解",isShow:false},
                    {title:"node",position:"熟练",isShow:false},
                    {title:"webpack",position:"掌握",isShow:false},
                    {title:"bootstrap",position:"精通",isShow:false},
                    {title:"git",position:"精通",isShow:false},
                    {title:"express",position:"了解",isShow:false},
                    {title:"axios",position:"掌握",isShow:false},
                    {title:"promise",position:"精通",isShow:false},
                    {title:"mongodb",position:"精通",isShow:false},
                    {title:"react",position:"掌握",isShow:false},
                    {title:"vue",position:"了解",isShow:false},
                    {title:"wechat",position:"熟练",isShow:false},
                    {title:"ajax",position:"精通",isShow:false}
                ],
            }
        },
        methods: {
            changed(index){
                this.MiddleArr[index].isShow = !this.MiddleArr[index].isShow
            }           
        },
        components: {
            Top,
            Footer,
            Middle
        },
    }
</script>

<style scoped>
</style>